<template>
  <div class="container">
    <el-tabs
        v-model="activeName"
        class="tabsContainer"
        type="border-card"
        >
        <el-tab-pane
            v-for="item in tabMapOptions"
            :key="item.key"
            :label="item.label"
            :name="item.key"
            >
            <SubmitHomework/>                
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watch } from 'vue'
import {  useRouter } from 'vue-router'
import SubmitHomework from './components/SubmitHomework.vue'

export default {
    components: {
        SubmitHomework
    },
    setup() {
        const dataMap = reactive({
        router: useRouter(),
        tabMapOptions: [
            { label: '发送信息', key: 'send' },
            { label: '查看信息', key: 'seek' }
        ],
        activeName: 'send',
        createdTimes: 0,
        showCreatedTimes() {
            dataMap.createdTimes = dataMap.createdTimes + 1
        }
        })
        onMounted(() => {
        })
        watch(() => dataMap.activeName, (s) => {
        dataMap.router
            .push(`${dataMap.route.path}?state=${s}`)
            .catch((err) => {
            console.warn(err)
            })
        })
        return { ...toRefs(dataMap) }
    }
}
</script>

<style>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;

}

.tabsContainer {
    height: 100%;
    width: 100%;
    margin-top: 15px;

}
</style>